<template>
  <view class="supplier-detail">
    <!-- 顶部导航 -->
    <custom-header title="详情" sticky />
    
    <!-- 供应商基本信息 -->
    <view class="supplier-info">
      <view class="info-left">
        <text class="supplier-name">{{ supplierInfo.name }}</text>
        <view class="phone-section"  @click="makeCall">
          <text class="phone-number">{{ supplierInfo.phone }}</text>
          <image class="phone-icon" src="/static/common/phone1.png" mode="aspectFit"/>
        </view>
      </view>
      <view class="info-right">
        <view class="label-btn" @click="reprintLabel">
          <text class="label-text">补打标签</text>
        </view>
      </view>
    </view>

    <!-- 统计卡片 -->
    <view class="stats-section">
      <view class="stats-row">
        <view class="stat-card">
          <text class="stat-label">花材</text>
        </view>
        <view class="stat-card">
          <text class="stat-label">货架号</text>
        </view>
        <view class="stat-card">
          <text class="stat-label">数量({{ statsData.totalQuantity }})</text>
        </view>
        <view class="stat-card">
          <text class="stat-label">质检问题</text>
        </view>
      </view>
    </view>

    <!-- 花材详细列表 -->
    <view class="flower-list">
      <!-- 表头 -->
      
      <!-- 数据行 -->
      <view class="list-body">
        <view 
          class="list-row" 
          v-for="(item, index) in flowerList" 
          :key="index"
          @click="goToFlowerDetail(item)"
        >
          <view class="table-cell flower-cell">
            <view class="flower-info">
              <text class="flower-name">{{ item.flowerName }}</text>
              <text :class="getGradeClass(item.grade)">{{ item.grade }}</text>
            </view>
          </view>
          <text class="table-cell shelf-cell">{{ item.shelfNumber }}</text>
          <text class="table-cell quantity-cell">{{ item.quantity }}</text>
          <view class="table-cell issue-cell">
            <text :class="getIssueClass(item.issue)">{{ item.issue }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import CustomHeader from '@/components/custom-header/custom-header.vue'

// 供应商基本信息
const supplierInfo = reactive({
  name: '洋洋花卉(晋宁)',
  phone: '13887478948',
  tag: '寻甸基地'
})

// 统计数据
const statsData = reactive({
  flowerTypes: 12,
  shelfCount: 8,
  totalQuantity: 315,
  issueCount: 3
})

// 花材列表数据
const flowerList = reactive([
  {
    flowerName: '蜜桃雪山(香槟)',
    grade: 'A级',
    shelfNumber: '#01-050',
    quantity: 8,
    issue: '无'
  },
  {
    flowerName: '粉红雪山',
    grade: 'B级',
    shelfNumber: '#01-027',
    quantity: 1,
    issue: '无'
  },
  {
    flowerName: '粉红雪山',
    grade: 'C级',
    shelfNumber: '#01-092',
    quantity: 1,
    issue: '无'
  },
  {
    flowerName: '蜜桃雪山(香槟)',
    grade: 'D级',
    shelfNumber: '#01-267',
    quantity: 3,
    issue: '无'
  },
  {
    flowerName: '微光',
    grade: 'B级',
    shelfNumber: '#01-303',
    quantity: 5,
    issue: '缺2'
  },
  {
    flowerName: '白雪山',
    grade: 'D级',
    shelfNumber: '#01-285',
    quantity: 5,
    issue: '无'
  },
  {
    flowerName: '艾莎',
    grade: 'E级',
    shelfNumber: '#01-283',
    quantity: 5,
    issue: '无'
  },
  {
    flowerName: '艾莎',
    grade: 'D级',
    shelfNumber: '#01-303',
    quantity: 9,
    issue: '降1'
  },
  {
    flowerName: '粉红雪山',
    grade: 'D级',
    shelfNumber: '#01-315',
    quantity: 10,
    issue: '无'
  },
  {
    flowerName: '高原红',
    grade: 'C级',
    shelfNumber: '#01-321',
    quantity: 11,
    issue: '无'
  },
  {
    flowerName: '卡布奇诺',
    grade: 'D级',
    shelfNumber: '#01-401',
    quantity: 7,
    issue: '无'
  },
  {
    flowerName: '橙色芭比',
    grade: 'D级',
    shelfNumber: '#01-407',
    quantity: 5,
    issue: '无'
  }
])

// 获取等级样式类
const getGradeClass = (grade) => {
  const gradeMap = {
    'A级': 'grade-a',
    'B级': 'grade-b',
    'C级': 'grade-c',
    'D级': 'grade-d',
    'E级': 'grade-e'
  }
  return gradeMap[grade] || 'grade-default'
}

// 获取质检问题样式类
const getIssueClass = (issue) => {
  if (issue === '无') {
    return 'issue-none'
  }
  return 'issue-has'
}

// 拨打电话
const makeCall = () => {
  uni.makePhoneCall({
    phoneNumber: supplierInfo.phone
  })
}

// 补打标签
const reprintLabel = () => {
  // uni.showToast({
  //   title: '正在生成标签...',
  //   icon: 'loading'
  // })
  uni.navigateTo({
  	url:'/pages/print/print'
  })
}

// 跳转到花材详情
const goToFlowerDetail = (item) => {
  uni.navigateTo({
    url: `/pages/flowerDetail/flowerDetail?flowerName=${item.flowerName}&grade=${item.grade}&shelfNumber=${item.shelfNumber}`
  })
}

onMounted(() => {
  // 获取页面参数
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const options = currentPage.options
  
  if (options.supplierName) {
    supplierInfo.name = options.supplierName
  }
  if (options.phone) {
    supplierInfo.phone = options.phone
  }
})
</script>

<style lang="scss">
.supplier-detail {
  min-height: 100vh;
  background: #FFFFFF;
  
  // 供应商基本信息
  .supplier-info {
    background: #ffffff;
    padding: 30rpx 24rpx;
    margin: 24rpx 24rpx 24rpx;
    border: 1rpx solid #F2F2F2;
    border-radius: 12rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .info-left {
      flex: 1;
      
      .supplier-name {
        font-size: 28rpx;
        color: #3D3D3D;
        font-weight: bold;
        display: block;
        margin-bottom: 16rpx;
        letter-spacing: normal;
      }
      
      .phone-section {
        display: flex;
        align-items: center;
        gap: 16rpx;
        
        .phone-number {
          font-size: 24rpx;
          color: #5786FF;
          font-weight: normal;
        }
        
        .phone-icon {
          width: 18rpx;
          height: 18rpx;
        }
      }
    }
    
    .info-right {
      .label-btn {
        background: #FFFFFF;
        border: 1rpx solid #D7D7D7;
        border-radius: 12rpx;
        padding: 10rpx 28rpx;
        
        .label-text {
          font-size: 24rpx;
          font-weight: normal;
          letter-spacing: normal;
          color: #3D3D3D;
        }
      }
    }
  }
  
  // 统计卡片区域
  .stats-section {
    margin: 0 24rpx 24rpx;
    
    .stats-row {
      display: flex;
      gap: 0;
      background: #FFF4E6;
      border-radius: 16rpx;
      overflow: hidden;
      
      .stat-card {
        flex: 1;
        padding: 20rpx 16rpx;
        text-align: center;
        border-right: 1rpx solid #F0F0F0;
        white-space: nowrap;
        
        &:first-child {
          flex: 2.8;
          text-align: left;
          padding-left: 24rpx;
        }
        
        &:nth-child(2) {
          flex: 1.5;
        }
        
        &:nth-child(3) {
          flex: 1.2;
        }
        
        &:last-child {
          flex: 1.5;
          border-right: none;
        }
        
        .stat-label {
          font-size: 24rpx;
          color: #EC6F15;
          font-weight: normal;
          letter-spacing: normal;
        }
      }
    }
  }
  
  // 花材列表
  .flower-list {
    margin: 0 24rpx;
    background: #ffffff;
    border-radius: 16rpx;
    overflow: hidden;
    
    .list-header {
      display: flex;
      background: #FFF4E6;
      height: 88rpx;
      align-items: center;
      
      .header-cell {
        font-size: 28rpx;
        color: #D97706;
        font-weight: 600;
        text-align: center;
        
        &.flower-col {
          flex: 2.8;
        }
        
        &.shelf-col {
          flex: 1.5;
        }
        
        &.quantity-col {
          flex: 1;
        }
        
        &.issue-col {
          flex: 1.5;
        }
      }
    }
    
    .list-body {
      .list-row {
        display: flex;
        align-items: stretch;
        min-height: 100rpx;
        border-bottom: 1rpx solid #f5f5f5;
        
        &:last-child {
          border-bottom: none;
        }
        
        .table-cell {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 20rpx 12rpx;
          font-size: 28rpx;
          color: #333333;
          
          &.flower-cell {
            flex: 2.8;
            justify-content: flex-start;
            padding-left: 24rpx;
            
            .flower-info {
              display: flex;
              flex-direction: row;
              align-items: center;
              gap: 12rpx;
              
              .flower-name {
                color: #333333;
                font-size: 24rpx;
                line-height: 1.2;
                white-space: nowrap;
              }
              
              .grade-a {
                color: #F5564D;
                font-size: 24rpx;
                font-weight: normal;
                line-height: 1;
              }
              .grade-b {
                // color: #FF9500;
				color: #F5564D;
                font-size: 24rpx;
                font-weight: normal;
                line-height: 1;
              }
              .grade-c {
                // color: #52C41A;
				color: #F5564D;
                font-size: 24rpx;
                font-weight: normal;
                line-height: 1;
              }
              .grade-d {
                // color: #4298FF;
				color: #F5564D;
                font-size: 24rpx;
                font-weight: normal;
                line-height: 1;
              }
              .grade-e {
                // color: #666666;
				color: #F5564D;
                font-size: 24rpx;
                font-weight: normal;
                line-height: 1;
              }
            }
          }
          
          &.shelf-cell {
            flex: 1.5;
            color: #666666;
            font-size: 24rpx;
          }
          
          &.quantity-cell {
            flex: 1.2;
            color: #333333;
            font-weight: normal;
            font-size: 28rpx;
          }
          
          &.issue-cell {
            flex: 1.5;
            
            .issue-none {
              color: #666666;
              font-size: 24rpx;
            }
            
            .issue-has {
              color: #f5564d;
              font-weight: normal;
              font-size: 24rpx;
            }
          }
        }
      }
    }
  }
}
</style> 